import { UserPromptConfig } from "@commitlint/types";
import { Card, Checkbox, Form, Input } from "antd";
import TypePromptPanel from "./TypePromptPanel";

interface PromptPanelProps {
    prompt: UserPromptConfig;
    onChange: (prompt: UserPromptConfig) => void;
}

export default function PromptPanel(props: PromptPanelProps) {
    return (
        <>
            <Card title="提示设置" bordered={false}>
                <Form labelCol={{ span: 3 }}>
                    <Form.Item label="影响范围分隔符">
                        <Input value={props.prompt.settings?.scopeEnumSeparator ?? ","} style={{ width: "100px" }} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.settings == undefined) {
                                prompt.settings = {
                                    scopeEnumSeparator: ",",
                                    enableMultipleScopes: true,
                                };
                            }
                            prompt.settings.scopeEnumSeparator = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="多个影响范围">
                        <Checkbox checked={props.prompt.settings?.enableMultipleScopes ?? true} onChange={e => {
                            e.stopPropagation();
                            let prompt = props.prompt;
                            if (prompt.settings == undefined) {
                                prompt.settings = {
                                    scopeEnumSeparator: ",",
                                    enableMultipleScopes: true,
                                };
                            }
                            prompt.settings.enableMultipleScopes = e.target.checked;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                </Form>
            </Card>
            <Card title="提示消息" bordered={false}>
                <Form labelCol={{ span: 3 }}>
                    {["skip", "max", "min", "emptyWarning", "upperLimitWarning", "lowerLimitWarning"].map(propKey => (
                        <Form.Item key={propKey} label={propKey}>
                            <Input value={props.prompt.messages == undefined ? "" : props.prompt.messages[propKey] ?? ""} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                let prompt = props.prompt;
                                if (prompt.messages == undefined) {
                                    prompt.messages = {
                                        skip: ':skip',
                                        max: 'upper %d chars',
                                        min: '%d chars at least',
                                        emptyWarning: 'can not be empty',
                                        upperLimitWarning: 'over limit',
                                        lowerLimitWarning: 'below limit'
                                    };
                                }
                                prompt.messages[propKey] = e.target.value;
                                props.onChange(prompt);
                            }} />
                        </Form.Item>
                    ))}
                </Form>
            </Card>
            <Card title="类型选择" bordered={false}>
                <Form labelCol={{ span: 3 }}>
                    <Form.Item label="选择提示">
                    <Input value={props.prompt.questions?.type?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.type == undefined) {
                                prompt.questions.type = {};
                            }
                            prompt.questions.type.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                </Form>
                <TypePromptPanel types={props.prompt.questions?.type?.enum ?? {}} onChange={types=>{
                    let prompt = props.prompt;
                    if (prompt.questions == undefined) {
                        prompt.questions = {};
                    }
                    if (prompt.questions.type == undefined) {
                        prompt.questions.type = {};
                    }
                    prompt.questions.type.enum = types;
                    props.onChange(prompt);
                }} />
            </Card>
            <Card title="其他提示问题" bordered={false}>
                <Form labelCol={{ span: 3 }}>
                    <Form.Item label="影响范围输入提示">
                        <Input value={props.prompt.questions?.scope?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.scope == undefined) {
                                prompt.questions.scope = {};
                            }
                            prompt.questions.scope.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="标题输入提示">
                        <Input value={props.prompt.questions?.subject?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.subject == undefined) {
                                prompt.questions.subject = {};
                            }
                            prompt.questions.subject.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="正文输入提示">
                        <Input value={props.prompt.questions?.body?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.body == undefined) {
                                prompt.questions.body = {};
                            }
                            prompt.questions.body.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="是否不兼容修改提示">
                        <Input value={props.prompt.questions?.isBreaking?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.isBreaking == undefined) {
                                prompt.questions.isBreaking = {};
                            }
                            prompt.questions.isBreaking.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="不兼容修改正文提示">
                        <Input value={props.prompt.questions?.breakingBody?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.breakingBody == undefined) {
                                prompt.questions.breakingBody = {};
                            }
                            prompt.questions.breakingBody.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="不兼容修改描述提示">
                        <Input value={props.prompt.questions?.breaking?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.breaking == undefined) {
                                prompt.questions.breaking = {};
                            }
                            prompt.questions.breaking.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="是否有相关工单提示">
                        <Input value={props.prompt.questions?.isIssueAffected?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.isIssueAffected == undefined) {
                                prompt.questions.isIssueAffected = {};
                            }
                            prompt.questions.isIssueAffected.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="相关工单正文提示">
                        <Input value={props.prompt.questions?.issuesBody?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.issuesBody == undefined) {
                                prompt.questions.issuesBody = {};
                            }
                            prompt.questions.issuesBody.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                    <Form.Item label="相关工单引用提示">
                        <Input value={props.prompt.questions?.issues?.description ?? ""} onChange={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            let prompt = props.prompt;
                            if (prompt.questions == undefined) {
                                prompt.questions = {};
                            }
                            if (prompt.questions.issues == undefined) {
                                prompt.questions.issues = {};
                            }
                            prompt.questions.issues.description = e.target.value;
                            props.onChange(prompt);
                        }} />
                    </Form.Item>
                </Form>
            </Card>
        </>
    );
}